<template>
  <table-index :table="table" @loadData="tableLoadData">
    <template #name="{ record }">
      <div class="col-over-text">{{ record.seriesName || record.name || '-' }} </div>
    </template>
    <template #totalAmount="{ record }">
      <span>{{ formatNumber(record.totalAmount) }}</span>
    </template>
    <template #count="{ record }">
      <span>{{ record.count || '-' }}</span>
    </template>
    <template #amount="{ record }">
      <span>{{ formatNumber(record.amount) }}</span>
    </template>
  </table-index>
</template>

<script setup name="carmodal" lang="ts">
  import { formatNumber } from '@/utils'
  import { carSeriesRevenueRank, carModelRevenueRank } from '@/api/dashboard/revenueSummary'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { ref } from 'vue'

  const columns = {
    carSeries: [
      { title: '排名', dataIndex: 'serialNo', width: 80 },
      { title: '车系', dataIndex: 'name', slotName: 'name' },
      {
        title: '收益(元)',
        dataIndex: 'totalAmount',
        slotName: 'totalAmount',
        width: 150,
        titleTooltipContent: '净收入=订单总费用-运营成本-抽佣',
        sortable: {
          sorter: true,
          sortDirections: ['ascend', 'descend'],
          defaultSortOrder: 'descend',
        },
      },
      {
        title: '订单量(单)',
        dataIndex: 'count',
        slotName: 'count',
        width: 150,
        sortable: {
          sorter: true,
          sortDirections: ['ascend', 'descend'],
        },
      },
      { title: '客单价(元)', dataIndex: 'amount', slotName: 'amount', width: 150 },
    ],
    carModel: [
      { title: '排名', dataIndex: 'serialNo', width: 80 },
      { title: '车型', dataIndex: 'name', slotName: 'name' },
      {
        title: '收益(元)',
        dataIndex: 'totalAmount',
        slotName: 'totalAmount',
        width: 150,
        titleTooltipContent: '净收入=订单总费用-运营成本-抽佣',
        sortable: {
          sorter: true,
          sortDirections: ['ascend', 'descend'],
        },
      },
      {
        title: '订单量(单)',
        dataIndex: 'count',
        slotName: 'count',
        width: 150,
        sortable: {
          sorter: true,
          sortDirections: ['ascend', 'descend'],
        },
      },
      { title: '客单价(元)', dataIndex: 'amount', slotName: 'amount', width: 150 },
    ],
  }

  const table = useTable({
    columns: columns['carSeries'],
  })

  const queryParam = ref<any>({})
  let handleLoadData: any = null

  const tableLoadData = (page: number) => {
    if (queryParam.value.tableType == 'carSeries') {
      table.columns = columns['carSeries']
      handleLoadData = useFetchTableDataApi(table, queryParam.value, carSeriesRevenueRank)
    } else if (queryParam.value.tableType == 'carModel') {
      table.columns = columns['carModel']
      handleLoadData = useFetchTableDataApi(table, queryParam.value, carModelRevenueRank)
    }

    handleLoadData(page)
  }

  const loadData = (params: any, operateType: string) => {
    queryParam.value = { ...queryParam.value, ...params }
    // 如果触发操作是切换车型/车型排行
    if (operateType == 'tableTypeChange') {
      // 清空排序字段
      queryParam.value.sortField = undefined
      queryParam.value.sortType = undefined
    }
    tableLoadData(1)
  }

  defineExpose({
    loadData,
  })
</script>

<style lang="less">
  .orderrevenuetable {
    .col-over-text {
      display: inline-block;
      // width: 80px;
      padding-right: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    :deep(.arco-select-view-single) {
      background: #fff !important;
    }
  }
</style>
